<!--
 * @Author: llgtfoo@163.com
 * @Date: 2020-08-09 18:32:46
 * @LastEditTime: 2020-11-09 08:39:35
 * @LastEditors: Please set LastEditors
 * @Description: 
 * @FilePath: \llgtfoo-conponents-boxs\src\views\Home.vue
 -->
<template>
  <div class="home-box">
    <div style="width:100%;height:100%">
      <div class="time-box">
        <date-time>
          <template slot-scope="time">{{time.data.year}}-{{time.data.time}}</template>
        </date-time>
        <!-- <date-time :styleObj="styleObj"></date-time> -->
      </div>
      <div class="select">
        <select-date :initYear="1996" :styleObj="styleObj1" @getDate="getDate"></select-date>
      </div>
      <p>{{11111|numberFormat({separator:'*',step:4})}}</p>
      <p>
        <number-scroll
          class="llo"
          :maxValue="option.maxValue"
          :duration="option.duration"
          :separator="option.separator"
          :toFixed="option.toFixed"
          :prefix="option.prefix"
          :suffix="option.suffix"
        ></number-scroll>
        <number-scroll
          class="llo"
          :maxValue="100000"
          :duration="2000"
          separator=","
          :toFixed="option.toFixed"
          :prefix="option.prefix"
          :suffix="option.suffix"
        ></number-scroll>
      </p>
      <tab-page :data="dataLists" :option="option1">
        <ul class="list-box">
          <li v-for="(item,index) in dataLists" :key="index">{{item.name}}</li>
        </ul>
      </tab-page>
      <br />
      <div style="display: flex;justify-content: center;">
        <list-scroll :data="dataScrollList" :option="scrollOption" ref="scrollList">
          <div class="list-scroll-header" slot="header">
            <ul>
              <li
                v-for="(item,index) in headerList"
                :key="index"
                :style="{flex:`${item.width&&item.width}`}"
              >{{item.name}}</li>
            </ul>
          </div>
          <ul class="scroll-list" slot="main">
            <li v-for="(item,index) in dataScrollList" :key="index" id="child" ref="child">
              <span>{{item.name}}</span>
              <span>{{item.age}}</span>
              <span>{{item.marriage}}</span>
            </li>
          </ul>
        </list-scroll>
      </div>
      <div style="display: flex;justify-content: center;">
        <list-scroll :data="dataScrollList" :option="scrollOption" ref="scrollList">
          <div class="list-scroll-header" slot="header">
            <ul>
              <li
                v-for="(item,index) in headerList"
                :key="index"
                :style="{flex:`${item.width&&item.width}`}"
              >{{item.name}}</li>
            </ul>
          </div>
          <ul class="scroll-list" slot="main">
            <li v-for="(item,index) in dataScrollList" :key="index" id="child" ref="child">
              <span>{{item.name}}</span>
              <span>{{item.age}}</span>
              <span>{{item.marriage}}</span>
            </li>
          </ul>
        </list-scroll>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import dateTime from "../../plugins/components/dateTime/date-time";
import selectDate from "../../plugins/components/selectDate/index.vue";
import numberScroll from "../../plugins/components/number-scroll/index";
import tabPage from "../../plugins/components/tabPage/index.vue";

import listScroll from "../../plugins/components/list-scroll/index";
export default {
  name: "DateTime",
  components: {
    dateTime,
    selectDate,
    numberScroll,
    tabPage,
    listScroll
  },
  methods: {
    getDate(data) {
      console.log(data);
    }
  },
  mounted() {
    console.log(this.$CMap, "cmap");
    // this.$refs.scrollList.keep()
  },
  data() {
    return {
      scrollOption: {
        number: 6,
        seamless: true,
        duration: 500
      },
      option1: {
        number: 5, //默认五个
        single: true,
        autoScroll: true,
        autoScrollTime: 2000,
        button:false
        // 注意：如果有间隔，请都向右，即margin-right
      },
      dataLists: [
        {
          name: "内容1"
        },
        {
          name: "内容2"
        },
        {
          name: "内容3"
        },
        {
          name: "内容4"
        },
        {
          name: "内容5"
        },
        {
          name: "内容6"
        }
        //  {
        //    name:'内容11'
        //  },
        //  {
        //    name:'内容21'
        //  },
        //  {
        //    name:'内容31'
        //  },
        //  {
        //    name:'内容41'
        //  },
        //  {
        //    name:'内容51'
        //  },
        //  {
        //    name:'内容61'
        //  },
      ],
      option: {
        // maxValue: 20000,
        duration: 1000
        // separator: ",",
        // toFixed:'0',
        // prefix: "$",
        // suffix: "@"
      },
      styleObj: {
        fontSize: 30,
        color: ["#dcedff", "red"]
      },
      styleObj1: {
        bg: "rgba(11, 41, 82, 0.5)",
        dropBg: "rgba(11, 41, 82, 0.8)",
        hoverBg: "cyan",
        scale: 0.5,
        fontColor: "red"
      },
      dataScrollList: [
        {
          name: "李四",
          age: 24,
          marriage: "0"
        },
        {
          name: "李四",
          age: 24,
          marriage: "未婚1"
        },
        {
          name: "李四",
          age: 24,
          marriage: "未婚2"
        },

        {
          name: "李四",
          age: 24,
          marriage: "未婚3"
        },
        {
          name: "李四",
          age: 24,
          marriage: "未婚4"
        },
        {
          name: "李四",
          age: 24,
          marriage: "未婚5"
        },
        {
          name: "李四",
          age: 24,
          marriage: "未婚6"
        },
        {
          name: "李四",
          age: 24,
          marriage: "未婚7"
        },
        {
          name: "李四",
          age: 24,
          marriage: "未婚8"
        },
        {
          name: "李四",
          age: 24,
          marriage: "未婚50"
        },
        {
          name: "李四",
          age: 24,
          marriage: "未婚69"
        },
        {
          name: "李四",
          age: 24,
          marriage: "未婚97"
        },
        {
          name: "李四",
          age: 24,
          marriage: "未婚89"
        },
        {
          name: "李四",
          age: 24,
          marriage: "未婚69"
        },
        {
          name: "李四",
          age: 24,
          marriage: "未婚97"
        },
        {
          name: "李四",
          age: 24,
          marriage: "未婚89"
        },
        {
          name: "李四",
          age: 24,
          marriage: "未婚69"
        },
        {
          name: "李四",
          age: 24,
          marriage: "未婚97"
        },
        {
          name: "李四",
          age: 24,
          marriage: "未婚89"
        },
        {
          name: "李四",
          age: 24,
          marriage: "未婚69"
        },
        {
          name: "李四",
          age: 24,
          marriage: "未婚97"
        },
        {
          name: "李四",
          age: 24,
          marriage: "未婚89"
        },
        {
          name: "李四",
          age: 24,
          marriage: "未婚8"
        },
        {
          name: "李四",
          age: 24,
          marriage: "未婚50"
        },
        {
          name: "李四",
          age: 24,
          marriage: "未婚69"
        },
        {
          name: "李四",
          age: 24,
          marriage: "未婚97"
        },
        {
          name: "李四",
          age: 24,
          marriage: "未婚89"
        },
        {
          name: "李四",
          age: 24,
          marriage: "未婚69"
        },
        {
          name: "李四",
          age: 24,
          marriage: "未婚97"
        },
        {
          name: "李四",
          age: 24,
          marriage: "未婚89"
        },
        {
          name: "李四",
          age: 24,
          marriage: "未婚69"
        },
        {
          name: "李四",
          age: 24,
          marriage: "未婚97"
        },
        {
          name: "李四",
          age: 24,
          marriage: "未婚89"
        },
        {
          name: "李四",
          age: 24,
          marriage: "未婚69"
        },
        {
          name: "李四",
          age: 24,
          marriage: "未婚97"
        },
        {
          name: "李四",
          age: 24,
          marriage: "未婚89"
        }
      ],
      headerList: [
        {
          name: "姓名",
          width: 1
        },
        {
          name: "年龄",
          width: 1
        },
        {
          name: "婚姻状况",
          width: 1
        }
      ]
    };
  }
};
</script>
<style lang="scss" scoped>
.list-scroll-header {
  width: 100%;
  background: cadetblue;

  ul {
    width: 100%;
    display: flex;
    align-items: center;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
  }
}
.scroll-list {
  width: 500px;
  li {
    display: flex;
    line-height: 50px;
    height: 50px;
    // margin-bottom:5px;
    &:nth-child(even) {
      background: #ccc;
    }
    &:nth-child(odd) {
      background: cyan;
      // background: #ccc;
    }
    span {
      flex: 1;
      font-size: 14px;
    }
  }
}
.list-box {
  display: flex;
  flex-wrap: nowrap;
  height: 50px;
  li {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: cyan;
    width: 85px;
    margin-right: 15px;
    font-size: 16px;
    &:last-of-type {
      // margin-right: 0;
    }
  }
}
.home-box {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #dedede;
  z-index: 9999999999;
  height: 100%;
  width: 100%;
}
.select {
  // width:500px;
  // background: cyan;
  // position: absolute;
  // top:20px;
  // left:20px;
  // margin-left:-100px;
  // position: relative;
  // width:0px;
  margin-left: 120px;
}
.time-box {
  position: absolute;
  right: 50px;
  top: 30px;
}
.llo {
  line-height: 100px;
  font-size: 40px;
  color: red;
}
</style>
